<template>
    <el-dialog class="ui-createcategory-dlg" v-model="dialogVisible" :title="dialogTitle" ref="dialog" @opened="init" :beforeClose="beforeClose" @closed="finalThings">
        <el-form :model="data" :rules="rules" ref="elForm" @submit.prevent="onSure" label-width="5.5rem">
            <el-form-item label="名称" prop="name">
                <el-input v-model="data.name"></el-input>
            </el-form-item>
            <el-form-item label="分类类型" prop="prop">
                <el-radio-group v-model="data.prop" size="large" :disabled="data.id">
                    <el-radio :label="0">虚拟分类</el-radio>
                    <el-radio :label="1">商品分类</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="box-row">
                <div style="flex:1"></div>
                <el-button size="default" type="primary" @click="onSure">保存</el-button>
                <el-button size="default" type="danger" @click="onCancel">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, toRefs } from 'vue-demi';
import { useSocket } from '../../uiframe/services/socket';
import { ElMessage } from 'element-plus';

export default {
    props:{
        q:Object,
        done: Function,
        payload:Object
    },
    setup:(props)=>{
        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        data = reactive({
            dialogVisible: true,
            dialogTitle: props.payload?.id ? '修改分类':'添加分类',
            dialog:null, elForm:null,
            loading:false,
            data:Object.assign({name:''}, props.payload || {})
        }),rules ={
            name:[
                {required:true, message:'名称必填'},
                {min:1, max:20, message:'名称长度为1~20字符.'}
            ],
            prop:[
                {required:true, message:'分类类型必选'},
            ]
        },
        methods = {
            onSure:()=>{
                if(data.loading) return;
                data.loading = true;
                data.elForm.validate(ret=>{
                    if(!ret) return;
                    useSocket().then(socket=>socket.rpc('save_goods_category', data.data).then(res=>{
                        onmessage(res);
                        data.dialogVisible = false;
                        props.q.resolve(res);
                    }).catch(res=>{
                        onmessage(res);
                    }))
                })
            },
            onCancel:()=>{
                data.dialogVisible = false;
            },
            init:()=>{},
            beforeClose:(next)=>{
                next();
            },
            finalThings:()=>props.done()
        };
        return {
            ...toRefs(data),
            ...methods,
            rules
        }
    }
}
</script>
<style lang="scss">
.ui-createcategory-dlg{
    width:35rem;max-width: 28rem;
    .el-form-item__label{
        margin-top: 3px;
    }
}
</style>